<!--分产品-->
<template>
  <div class="jzTrend">
    <div class="operation">
      <el-form :inline="true" :model="form" label-width="80px" class="formList">
        <el-form-item label="选择区域">
          <!-- <el-select v-model="form.areaId"  placeholder="选择区域" >
            <el-option
              v-for="item in areaList"
              :key="item.areaId"
              :label="item.areaName"
              :value="item.areaId">
            </el-option>
          </el-select> -->
          <dx-cascader :area_id.sync="form.areaId" />
        </el-form-item>
        <el-form-item label="账期">
          <el-date-picker v-model="form.year" value-format="yyyy" type="year" placeholder="选择年">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="findBusinessIndexGrowth">查询</el-button>
          <el-button size="small" type="orange" @click="exportExcel">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
     <p class="g-unit">单位: 户</p>
    <div class="tableBox">
      <el-table v-loading="tableLoading" :data="tableData" style="width: 100%" class="tableTh28" border stripe height="65vh"
        :span-method="arraySpanMethod" ref="table">
        <el-table-column fixed prop="product" label="产品" class-name="fixedColumn"></el-table-column>
        <el-table-column fixed prop="areaName" label="区域" width="120" :show-overflow-tooltip="true" class-name="fixedColumn"></el-table-column>
        <el-table-column label="净增">
          <el-table-column prop="january" label="1月" class-name="right-money"></el-table-column>
          <el-table-column prop="february" label="2月" class-name="right-money"></el-table-column>
          <el-table-column prop="march" label="3月" class-name="right-money"></el-table-column>
          <el-table-column prop="april" label="4月" class-name="right-money"></el-table-column>
          <el-table-column prop="may" label="5月" class-name="right-money"></el-table-column>
          <el-table-column prop="june" label="6月" class-name="right-money"></el-table-column>
          <el-table-column prop="july" label="7月" class-name="right-money"></el-table-column>
          <el-table-column prop="august" label="8月" class-name="right-money"></el-table-column>
          <el-table-column prop="september" label="9月" class-name="right-money"></el-table-column>
          <el-table-column prop="october" label="10月" class-name="right-money"></el-table-column>
          <el-table-column prop="november" label="11月" class-name="right-money"></el-table-column>
          <el-table-column prop="december" label="12月" class-name="right-money"></el-table-column>
          <el-table-column prop="indexCompleteSum" label="累计完成数" width="120"></el-table-column>
        </el-table-column>
        <el-table-column label="净增季度累计完成数">
          <el-table-column prop="newlyQuarterOne" label="一季度" class-name="right-money"></el-table-column>
          <el-table-column prop="newlyQuarterTwo" label="二季度" class-name="right-money"></el-table-column>
          <el-table-column prop="newlyQuarterThree" label="三季度" class-name="right-money"></el-table-column>
          <el-table-column prop="newlyQuarterFour" label="四季度" class-name="right-money"></el-table-column>
          <!-- <el-table-column prop="newlyQuarterSum" label="年累计" class-name="right-money"></el-table-column> -->
        </el-table-column>
        <el-table-column label="净增季度指标">
          <el-table-column prop="indexQuarterOne" label="一季度" class-name="right-money"></el-table-column>
          <el-table-column prop="indexQuarterTwo" label="二季度" class-name="right-money"></el-table-column>
          <el-table-column prop="indexQuarterThree" label="三季度" class-name="right-money"></el-table-column>
          <el-table-column prop="indexQuarterFour" label="四季度" class-name="right-money"> </el-table-column>
          <!-- <el-table-column prop="indexQuarterSum" label="年累计" class-name="right-money"></el-table-column> -->
        </el-table-column>
        <el-table-column label="净增季度指标累计完成率">
          <el-table-column prop="rateQuarterOne" label="一季度" class-name="right-money"></el-table-column>
          <el-table-column prop="rateQuarterTwo" label="二季度" class-name="right-money"></el-table-column>
          <el-table-column prop="rateQuarterThree" label="三季度" class-name="right-money"></el-table-column>
          <el-table-column prop="rateQuarterFour" label="四季度" class-name="right-money"></el-table-column>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  import {
    $budgetAPI
  } from '@/api';
  import {
    getSessionStorage
  } from "@/common/js/storage";
  import prefixAPI from "@/api/prefixAPI";
  import { getCookie } from "@/common/js/cookie";

  export default {
    name: "jzTrend",
    data() {
      return {
        form: {
          areaId: "",
          year: "",
        },
        accountInfo: "",
        areaList: [],
        tableLoading: false,
        tableData: [],
        count: '',
        time: Date.parse(new Date()),
      }
    },
    created() {
      this.accountInfo = JSON.parse(getSessionStorage('accountInfo'));
      this.form.areaId = this.accountInfo.areaId;
      this.form.year = this.moment().format('YYYY')
      this.init();

    },
    methods: {
      //分产品导出
      exportExcel() {
        let areaId = "";
        let year = "";
        let token = getCookie("token");
        if (this.form.areaId) {
          areaId = this.form.areaId
        } else {
          areaId = this.accountInfo.areaId
        }
        if (this.form.year) {
          year = this.form.year
        } else {
          year = this.formatDate(this.time)
        }

        if (process.env.NODE_ENV == 'development') {
          window.location.href = prefixAPI.loc + "/api/budgetTrack/ExportBusinessIndexByGrowth?areaId=" + areaId +
            '&year=' + year + '&token=' + token;
        } else if (process.env.NODE_ENV == 'production') {
          window.location.href = prefixAPI.hp + "/api/budgetTrack/ExportBusinessIndexByGrowth?areaId=" + areaId +
            '&year=' + year + '&token=' + token;
        }
      },
      //获取当前时间
      formatDate: function(value) {
        let date = new Date(value);
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? ('0' + MM) : MM;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        let h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        let m = date.getMinutes();
        m = m < 10 ? ('0' + m) : m;
        let s = date.getSeconds();
        s = s < 10 ? ('0' + s) : s;
        return y;
      },
      //table合并行
      arraySpanMethod({
        row,
        column,
        rowIndex,
        columnIndex
      }) {
        if (columnIndex === 0 && this.count) {
          if (rowIndex % this.count === 0) {
            return {
              colspan: 1,
              rowspan: this.count
            };
          } else {
            return {
              colspan: 0,
              rowspan: 0
            }
          }
        }
      },
      //区域选择 返回ID和name
      areaChange(vId) {
        // vID 是一个数组，循环获取name,根据id
        if (!vId && vId.length === 0) {
          return;
        } //这里多选的时候获取name和单选不一样 单选是对象 多选是数组所以...
        let nameArr = [];
        let codeArr = [];
        let that = this;
        vId.forEach(element => {
          let obj = that.areaList.find((item) => {
            return item.areaId === element;
          });
          if (obj) {
            nameArr.push(obj.areaName);
            codeArr.push(obj.areaId);

          }
        });
      },
      //根据层级获取区域树
      getCompanyByLvl() {
        $budgetAPI.getCompanyByLvl({
          lvl: this.accountInfo.areaLvl,
          areaId: this.accountInfo.areaId
        }, res => {
          this.alertError(res);
          this.areaList = res.content;
        }, err => {

        })
      },
      //净增趋势
      findBusinessIndexGrowth(params) {
        this.tableData = [];
        let obj = {};
        if (this.form.areaId) {
          obj = this.form
        } else {
          obj = params
        }
        this.tableLoading = true;
        $budgetAPI.findBusinessIndexGrowth(obj, res => {
          this.alertError(res);
          if (res.code == 0) {
            this.count = res.content[0].count;
            res.content.map((item, index) => {
              item.list.map((child, idx) => {
                // if(child.product == 'VP008001'){
                //   this.$set(child,'productName','移动')
                // }
                // if(child.product == 'VP008002'){
                //   this.$set(child,'productName','宽带')
                // }
                // if(child.product == 'VP008003'){
                //   this.$set(child,'productName','天翼高清')
                // }
                this.tableData.push(child);
              })
            });
            this.tableLoading = false;
            setTimeout(() => {
              this.$refs.table.doLayout();
            }, 500);
          }
        }, err => {

        })
      },
      init() {
        // this.getCompanyByLvl();
        let params = {
          areaId: this.accountInfo.areaId,
          year: this.formatDate(this.time)
        };
        this.findBusinessIndexGrowth(params)
      },

    }
  }
</script>
<style lang="scss" scoped>

</style>
<style lang="scss">
  .jzTrend {

    .operation {
      .daochu {
        float: right;

        .el-form-item__content {
          float: right;

          .el-button {
            float: right;
          }
        }
      }
    }
  }
</style>
